﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位添加</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入Element Plus样式和JS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <!-- 自定义样式 -->
    <style>
        .job-form-container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .breadcrumb {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
            color: #6c757d;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .el-button-group {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="job-form-container">
        <!-- 业务导航 -->
        <div class="breadcrumb">
            <span>您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位设置--职位添加</span>
        </div>

        <!-- 表单区域 -->
        <el-form :model="formData"
                 :rules="rules"
                 ref="formRef"
                 label-width="120px">
            <el-form-item label="职位分类编号" prop="major_kind_id">
                <el-input v-model="formData.major_kind_id"></el-input>
            </el-form-item>

            <el-form-item label="职位分类名称" prop="major_kind_name">
                <el-input v-model="formData.major_kind_name"></el-input>
            </el-form-item>

            <el-form-item label="职位编号" prop="major_id">
                <el-input v-model="formData.major_id"></el-input>
            </el-form-item>

            <el-form-item label="职位名称" prop="major_name">
                <el-input v-model="formData.major_name"></el-input>
            </el-form-item>

            <el-form-item class="el-button-group">
                <el-button type="primary" v-on:click ="handleSubmit">提交</el-button>
                <el-button v-on:click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        const { createApp, ref } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            setup() {
                // 表单数据
                const formData = ref({
                    major_kind_id: '',
                    major_kind_name: '',
                    major_id: '',
                    major_name: ''
                });

                // 验证规则
                const rules = ref({
                    major_kind_id: [{ required: true, message: '请输入职位分类编号', trigger: 'blur' }],
                    major_kind_name: [{ required: true, message: '请输入职位分类名称', trigger: 'blur' }],
                    major_id: [{ required: true, message: '请输入职位编号', trigger: 'blur' }],
                    major_name: [{ required: true, message: '请输入职位名称', trigger: 'blur' }]
                });

                // 表单引用
                const formRef = ref(null);

                // 提交处理
                const handleSubmit = async () => {
                    await formRef.value.validate((valid) => {
                        if (!valid) return;
                    });

                    try {
                        const response = await axios.post(
                            "/config/major_add",
                            formData.value,
                            { headers: { 'Content-Type': 'application/json' } }
                        );

                        if (response.data.success) {
                            ElMessage.success('职位添加成功');
                            window.location.href = '/config/config_major1'; // 跳转至目标页面
                        } else {
                            ElMessage.error(`操作失败：${response.data.message}`);
                        }
                    } catch (error) {
                        ElMessage.error('服务器请求失败，请检查网络');
                        console.error(error);
                    }
                };

                // 返回上一页
                const goBack = () => window.history.back();

                return { formData, rules, formRef, handleSubmit, goBack };
            }
        })
        .use(ElementPlus, { locale: ElementPlusLocaleZhCn }) // 配置中文语言
        .mount('#app');
    </script>
</body>
</html>